<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('自定义表头')}`">{{ $t('自定义表头') }}</t>
            <li>
                在列配置项内传入<span class="s-code">headerSlotCode</span>即可开启该列表头插槽
            </li>
            <li>
                字段<span class="s-code">headerSlotCode</span>的类型为<span class="s-code">String</span>，
                开启的插槽，其名称为该字段值，参数为:<span class="s-code">({ column, config, index })</span>
            </li>
        </template>
        <sib-table :table-column="tableColumn" :table-data="tableData">
            <template #columnHeaderName="{ config }">
                <el-tag>{{ config.label }}</el-tag>
            </template>
            <template #columnHeaderStatus>
                <el-input v-model="something" size="small" placeholder="Type to search"></el-input>
            </template>
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        return {
            tableColumn: [
                { label: '姓名', code: 'name', headerSlotCode: 'columnHeaderName' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status', headerSlotCode: 'columnHeaderStatus' },
            ],
            tableData: Array(8).fill().map((_, i) => ({
                id: i + 1,
                name: `张三${i + 1}号`,
                sex: i % 2 ? '男' : '女',
                status: '未婚',
                age: i + 20,
            })),
            something: ref(''),
            templateString: `<template>
    <div class="example-box">
        <sib-table :table-column="tableColumn" :table-data="tableData">
            <template #columnHeaderName="{ config }">
                <el-tag>{{ config.label }}</el-tag>
            </template>
            <template #columnHeaderStatus>
                <el-input v-model="something" size="small" placeholder="Type to search"></el-input>
            </template>
        </sib-table>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        return {
            tableColumn: [
                // 配置 headerSlotCode 字段即可开启该列表头插槽，插槽名为该字段值，参数为: ({ column, config, index })
                { label: '姓名', code: 'name', headerSlotCode: 'columnHeaderName' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status', headerSlotCode: 'columnHeaderStatus' },
            ],
            tableData: Array(8).fill().map((_, i) => ({
                id: i + 1,
                name: \`张三\${i + 1}号\`,
                sex: i % 2 ? '男' : '女',
                status: '未婚',
                age: i + 20,
            })),
            something: ref(''),
        };
    },
};
<\/script>`,
        };
    },
};
</script>
